<template>
  <div v-if="Object.keys(info).length !== 0" class="base-info">
    <div class="info-title">{{info.title}}</div>
    <div class="info-price">
      <div class="realPrice">{{'￥'+info.realPrice}}</div>
      <div class="oldPrice">{{info.oldPrice}}</div>
      <div class="discount" v-if="info.discount.trim() != ''">{{info.discount}}</div>
    </div>
    <div class="info-columns">
      <div class="sales">{{info.columns[0]}}</div>
      <div class="collect">{{info.columns[1]}}</div>
      <div class="delivery">{{info.services[info.services.length - 1].name}}</div>
    </div>
    <div class="info-services">
      <div v-for="index in info.services.length-1" :key="index">
        <img src="@/assets/img/detail/services.webp" alt="services" />
        {{info.services[index-1].name}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "detail-basr-info",
  props: {
    info: {
      type: Object,
      default() {
        return {};
      }
    }
  }
};
</script>

<style scoped>
.base-info {
  background: #fff;
}
.info-title {
  padding: 12px 12px;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}
.info-price {
  display: flex;
  margin: 0 10px;
  font-size: 16px;
}
.realPrice {
  font-size: 20px;
  color: var(--color-tint);
}
.oldPrice {
  padding: 8px 5px 0;
  font-size: 12px;
  text-decoration: line-through;
  color: #888;
}
.discount {
  padding: 3px 10px;
  background: var(--color-tint);
  color: #fff;
  border-radius: 10px;
}
.info-columns,
.info-services {
  display: flex;
  padding: 15px 12px 10px;
  border-bottom: 10px solid #f6f6f6;
}
.info-columns > div,
.info-services > div {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.collect {
  text-align: center;
}
.delivery {
  text-align: right;
}
.info-services {
  font-size: 12px;
}
.info-services img {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
}
.info-services :last-child {
  text-align: right;
}
</style>